<template>
    <div class="maintainer-home">
        <div class="content">
            <div ref="myChart" id="myChart"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { getScoreService } from '@/api/maintainer'
export default {
  data () {
    return {
      score: {}

    }
  },
  created () {
  },
  mounted () {
    this.getEcharts()
  },
  methods: {
    async getEcharts () {
      const data = await getScoreService().then(res => {
        return res.data
      })
      console.log(data)
      const chartDom = this.$refs.myChart
      const myChart = echarts.init(chartDom)
      myChart.showLoading()
      const option = {
        color: [
          '#fc8251',
          '#5470c6',
          '#67E0E3',
          '#91cd77',
          '#ef6567',
          '#75bedc'
        ],

        legend: {
          top: 'left',
          data: ['好评', '中评', '差评']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: data.highScore, name: '好评' },
              { value: data.middleScore, name: '中评' },
              { value: data.lowScore, name: '差评' }

            ]
          }
        ]
      }
      myChart.hideLoading()
      option && myChart.setOption(option)
    },
    async getScore () {
      await getScoreService().then(res => {
        return res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
#myChart {
    width: 100%;
    height: 570px;
}
</style>
